<template>
	<view class="container">
		<view class="section">
			<text class="label">纸张类型：</text>
			<picker :range="paperOptions" @change="onPaperChange">
				<view class="picker">
					{{ selectedPaper }}
				</view>
			</picker>
		</view>

		<view class="section">
			<text class="label">单双面：</text>
			<radio-group @change="onSideChange">
				<label class="radio">
					<radio value="单面" :checked="side === '单面'" /> 单面
				</label>
				<label class="radio">
					<radio value="双面" :checked="side === '双面'" /> 双面
				</label>
			</radio-group>
		</view>

		<view class="section">
			<text class="label">份数：</text>
			<input type="number" v-model.number="count" min="1" />
		</view>

		<view class="section">
			<text class="label">上传文件：</text>
			<button @click="chooseFile">选择文件</button>
			<view v-if="fileName">已选择：{{ fileName }}</view>
		</view>

		<view class="section">
			<text class="label">总价：</text>
			<text class="price">{{ totalPrice }} 元</text>
		</view>

		<button type="primary" @click="submitOrder">提交订单</button>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'

	const paperOptions = ['A4 70g', 'A4 80g', '铜版纸', '彩色纸']
	const selectedPaper = ref(paperOptions[0])
	const side = ref('单面')
	const count = ref(1)
	const fileName = ref('')
	const filePath = ref('')

	const pricePerPage = 0.2 // 示例单价
	const totalPrice = ref(0)

	// 监听价格变化
	watch([selectedPaper, side, count], () => {
		calcPrice()
	})

	const onPaperChange = (e) => {
		selectedPaper.value = paperOptions[e.detail.value]
	}

	const onSideChange = (e) => {
		side.value = e.detail.value
	}

	const chooseFile = () => {
		uni.chooseFile({
			count: 1,
			success: (res) => {
				const file = res.tempFiles[0]
				fileName.value = file.name
				filePath.value = file.path
			}
		})
	}

	const calcPrice = () => {
		let base = pricePerPage
		if (side.value === '双面') base *= 1.5
		totalPrice.value = (base * count.value).toFixed(2)
	}

	const submitOrder = () => {
		if (!filePath.value) {
			uni.showToast({
				title: '请上传文件',
				icon: 'none'
			})
			return
		}

		// 可接你后端的上传/下单接口
		uni.uploadFile({
			url: 'https://your-server.com/upload', // 你自己的接口地址
			filePath: filePath.value,
			name: 'file',
			formData: {
				paper: selectedPaper.value,
				side: side.value,
				count: count.value,
				total: totalPrice.value
			},
			success: (uploadRes) => {
				uni.showToast({
					title: '订单提交成功',
					icon: 'success'
				})
			}
		})
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}

	.section {
		margin-bottom: 20rpx;
	}

	.label {
		font-weight: bold;
	}

	.radio {
		margin-right: 20rpx;
	}

	.price {
		color: red;
		font-size: 32rpx;
	}
</style>